<template>
  <!--参考页 https://m.vip.com/product-1710616665-6919701487540448345.html -->
  <div id="detail">
    <img :src="img" class="img" />
    <div id="contact">
      <div id="price">
        <span class="price">{{ price }}</span>
        <span class="tm">特卖价{{tmPrice}}</span>
        <img :src="img2" class="img2" />
      </div>
      <div id="originalPrice">
        <span class="originalPrice">{{ originalPrice }}</span>
        <span class="discount">{{ discount }}</span>
      </div>
    </div>
    <div id="word">
      <div id="name">{{ name }}</div>
    </div>
    <div id="bottom">
      <div class="icon">
        <img src="../assets/icon_1.png" />
        <br />
        <p>客服</p>
      </div>
      <div class="icon">
        <img src="../assets/icon_2.png" />
        <br />
        <p>购物车</p>
      </div>
      <div id="choose">
        <div id="price1">
          <span>{{ originalPrice }}</span>
        </div>
        <div id="price2">
          <div id="tmPri">
            <span>{{ tmPrice }}</span>
          </div>
          <div id="zi" v-on:click="toBuy">
            <span>特卖价 抢 ></span>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import picture1 from "../assets/51.png";
export default {
  name: "CommodityDetail",
  props: [
    "id",
    "img",
    "name",
    "price",
    "tmPrice",
    "discount",
    "originalPrice",
    "num"
  ],
  data() {
    return {
      title: "",
      img2: picture1
    };
  },
  methods: {
    toBuy: function() {
      let key = "cart";
      let pro = {
        id: this.id,
        name: this.name,
        price: this.price,
        img: this.img,
        num: this.num
      };
      let allProducts = localStorage.getItem(key);
      allProducts = JSON.parse(allProducts);
      if (allProducts) {
        let inPro = false;
        for (let key in allProducts) {
          //引用传递
          let detailPro = allProducts[key]; //取出购物车中的每一个商品
          console.log(detailPro.id, pro.id);
          //如果此次的购物商品已经存在
          if (detailPro.id == pro.id) {
            detailPro.num++; //detailPro 是 allProducts 中的其中一条数据
            inPro = true;
          }
        }
        if (!inPro) {
          allProducts.push(pro);
        }
      } else {
        //没有购物时候
        allProducts = [];
        allProducts.push(pro);
      }
      localStorage.setItem(key, JSON.stringify(allProducts)); //数组对象->字符串
      this.$router.push({ path: "/cartList" }); //path 方式调转到cartlist页面，便于重新选购商品
      //window.history.go(-1);  //或者使用原生js回退的方式跳转页面，-1表示上1个页面，即此处的cartlist页面
    }
  },
  mounted() {
    // console.log(this.$route.params);
    // let params = this.$route.params;
    // for (var key in params) {
    //   this[key] = params[key];
    // }
  }
};
</script>

<style scoped>
.img {
  width: 600px;
  height: 850px;
  margin-left: 200px;
}
.img2 {
  width: 200px;
  vertical-align: middle;
  float: right;
}
#contact {
  width: 1000px;
  height: 190px;
  background-image: url("https://h2a.appsimg.com/b.appsimg.com/upload/mcp/2022/04/29/63/165120104096_2409x318_90.png!85.webp");
}
#price {
  padding: 30px 0;
  vertical-align: top;
}
/*解决两个span盒子紧挨，高度不一致的问题*/
#price span {
  vertical-align: middle;
}
#price .price {
  margin-left: 60px;
  font-size: 50px;
  color: #fff;
}
#price .tm {
  margin-left: 20px;
  background-color: #fff;
  padding: 15px 10px;
  margin-bottom: 20px;
  font-size: 30px;
  color: #ce3e5b;
  border-radius: 10px;
  font-weight: 600;
}
#originalPrice span {
  vertical-align: middle;
}
#originalPrice .originalPrice {
  margin-left: 65px;
  font-size: 25px;
  color: #fff;
  text-decoration: line-through;
}
#originalPrice .discount {
  margin-left: 20px;
  font-size: 25px;
  color: #fff;
}
#word {
  width: 1000px;
  height: 100px;
  background-color: #fff;
  border-bottom: 1px solid lightgrey;
}
#word #name {
  font-size: 30px;
  padding: 30px 0;
  margin-left: 40px;
}
#bottom {
  width: 100%;
  height: 120px;
  background-color: #fff;
  display: flex;
  padding-top: 8px;
  /* justify-content: space-between; */
}
#bottom p {
  font-size: 20px;
}
.icon {
  margin-left: 20px;
  margin-top: 8px;
  padding: 10px;
}
.icon img {
  width: 50px;
}
#choose {
  display: flex;
  margin-left: 50px;
}
#choose #price1 {
  width: 350px;
  height: 110px;
  background-color: #f688a4;
  border-radius: 10px 0 0 10px;
  margin-left: 55px;
  font-size: 24.5px;
  color: #fff;
  text-decoration: line-through;
}
#choose span {
  font-size: 35px;
}
#price1 span {
  margin-left: 120px;
  line-height: 100px;
}
#choose #price2 {
  width: 350px;
  height: 110px;
  background-color: #f03867;
  border-radius: 0 10px 10px 0;
}

#price2 #tmPri {
  color: #fff;
  margin: 10px 120px;
}
#price2 #zi {
  font-size: 17px;
  color: #fff;
  margin-left: 80px;
  margin-top: -15px;
}
</style>